<!--
 * @description: 
 * @Author: jhw
 * @Date: 2023-05-13 20:17:50
 * @LastEditors: jhw
 * @LastEditTime: 2024-06-18 15:13:36
-->
<template>
  <div>
    <h1 class="title">dashboard $spacer</h1>
    <div class="text-1">万里滔滔江水永不休 $font-size</div>
    <div class="text-2">万里滔滔江水永不休 $font-size-base</div>
    <div class="text-3">万里滔滔江水永不休 $font-size-l</div>
    <div class="text-5">万里滔滔江水永不休 $font-size-xl</div>
    <div class="text-6">万里滔滔江水永不休 $font-size-xxl</div>
    <div class="g-card">测试minxi样式 + func tion样式</div>
    <!-- <el-button @click="onCreateUser">创建</el-button> -->
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <EyeDropper></EyeDropper>
  </div>
</template>

<script lang="ts" setup>
// import { getSystemList, createUser } from '@/apis/demo';
import { onMounted, ref } from 'vue';
import EyeDropper from '@/components/EyeDropper/index.vue';

const value1 = ref('');

// const onCreateUser = async () => {
//   const data = {
//     name: '蔡娜',
//     age: 74,
//     male: 2,
//     email: 'p.osjfkwy@ndzdt.nt',
//     github: 'http://veqcoetps.eg/qiihlod',
//   };
//   await createUser(data);
// };

onMounted(async () => {
  // const res = await getSystemList();
  // console.log(res);
});
</script>

<style lang="scss" scoped>
.title {
  color: $primary-color;
  margin-bottom: $spacer;
  line-height: $line-height-xxl;
  background-clip: text;
}

.text-1 {
  font-size: $font-size;
  margin-bottom: $spacer-s;
}

.text-2 {
  font-size: $font-size-base;
  margin-bottom: $spacer-l;
}

.text-3 {
  font-size: $font-size-l;
  margin-bottom: $spacer-1;
}

.text-5 {
  font-size: $font-size-xl;
  margin-bottom: $spacer-2;
}

.text-6 {
  font-size: $font-size-xxl;
  margin-bottom: $spacer-5;
}

.g-card {
  @include g-m-t(20px);

  margin-bottom: square(10);
}
</style>
